<template>
  <AsyncModal v-model:open="modelValue" title="修改密码" destroyOnClose :maskClosable="false" :confirmLoading="confirmLoading" @cancel="cancel" @ok="ok">
    <a-form ref="formRef" name="custom-validation" :model="formData" v-bind="layout" :rules="formRules">
      <a-form-item label="旧密码" name="oldPasswd">
        <a-input-password placeholder="请输入" v-model:value="formData.oldPasswd" />
      </a-form-item>
      <a-form-item label="新密码" name="passwd">
        <a-input-password placeholder="请输入" v-model:value="formData.passwd" />
      </a-form-item>
      <a-form-item label="确认密码" name="passwdCheck">
        <a-input-password placeholder="请输入" v-model:value="formData.passwdCheck" />
      </a-form-item>
    </a-form>
  </AsyncModal>
</template>

<script lang="ts" setup>
import AsyncModal from '_c/AsyncModal/index.vue'
import { FormInstance, Rule } from 'ant-design-vue/es/form'
import { reactive, ref, watch } from 'vue'
import { formVerify } from '@/utils/form-validator'
import { loadingPromise } from '@/utils/tools'
import { message } from 'ant-design-vue'
import { useRouter } from 'vue-router'
const router = useRouter()

const modelValue = defineModel<boolean>()

const layout = {
  labelCol: { span: 5 },
  wrapperCol: { span: 19 }
}

const confirmLoading = ref(false)
const formRef = ref<FormInstance>()
const formData = reactive<{ [attr: string]: any }>({})

// 定义密码正则规则
const passwdRe = /^[^\u4e00-\u9fa5]{6,16}$/

// 检验旧密码
function validateOldPasswd(rule: Rule, value: string) {
  const { required } = rule
  if (!required) {
    return Promise.resolve()
  } else if (!value) {
    return Promise.reject('旧密码不能为空')
  } else if (!passwdRe.test(value)) {
    return Promise.reject('格式错误！提示：不能包含汉字且不能小于6位，大于16位')
  } else {
    return Promise.resolve()
  }
}

// 检验密码
function validatePasswd(rule: Rule, value: string) {
  const { required } = rule
  if (!required) {
    return Promise.resolve()
  } else if (!value) {
    return Promise.reject('新密码不能为空')
  } else if (!passwdRe.test(value)) {
    return Promise.reject('密码不能包含汉字且不能小于6位，大于16位')
  } else {
    if (formData?.passwdCheck !== '') {
      formRef?.value?.validateFields('passwdCheck')
    }
    return Promise.resolve()
  }
}

// 检验确认密码
function validatePassCheck(rule: Rule, value: string) {
  const { required } = rule
  if (!required) {
    return Promise.resolve()
  } else if (!value) {
    return Promise.reject('确认密码不能为空')
  } else if (value !== formData.passwd) {
    return Promise.reject('确认密码与新密码不一致')
  } else {
    return Promise.resolve()
  }
}

// 表单校验规则
const formRules: any = {
  oldPasswd: [{ required: true, validator: validateOldPasswd, trigger: 'blur' }],
  passwd: [{ required: true, validator: validatePasswd, trigger: 'blur' }],
  passwdCheck: [{ required: true, validator: validatePassCheck, trigger: 'blur' }]
}

// 取消事件
const cancel = () => {
  modelValue.value = false
}

// 确认事件
const ok = async () => {
  if (!(await formVerify(formRef))) {
    return
  }
  confirmLoading.value = true
  await loadingPromise()
  message.success('修改成功！请重新登录')
  await loadingPromise([400, 461, 500, 600])
  router.push({
    path: '/login'
  })
  confirmLoading.value = false
}

// 监听关闭，清空表单状态
watch(
  () => modelValue,
  newVal => {
    if (!newVal) {
      formRef?.value?.clearValidate()
      formRef?.value?.resetFields()
    }
  }
)
</script>

<style lang="less" scoped>
.user-info {
  display: flex;
  align-items: center;

  .user-avatar {
    margin-right: 6px;
  }

  .user-name {
    font-size: 14px;
  }
}
</style>
